// import {
//     init
// } from 'snabbdom/build/init'
// import {
//     classModule
// } from 'snabbdom/build/modules/class'
// import {
//     propsModule
// } from 'snabbdom/build/modules/props'
// import {
//     styleModule
// } from 'snabbdom/build/modules/style'
// import {
//     eventListenersModule
// } from 'snabbdom/build/modules/eventlisteners'
// import {
//     h
// } from 'snabbdom/build/h'


// // 创建出patch函数
// const patch = init([classModule, propsModule, styleModule, eventListenersModule])

// // 创建虚拟节点
// const myVnode1 = h('a', {
//     props: {
//         href: 'https://www.baidu.com',
//         target: '_blank'
//     }
// }, '百度')
// console.log(myVnode1)

// const myVnode2 = h('div', {
//     class: {
//         'box': true
//     }
// }, '我是一个盒子')
// console.log(myVnode2)

// const myVnode3 = h('ul', [
//     h('li', '苹果'),
//     h('li', '香蕉'),
//     h('li', [
//         h('div', [
//             h('p', '一个p'),
//             h('p', '两个p')
//         ])
//     ]),
//     h('li', '葡萄')
// ])
// console.log(myVnode3)

// const myVnode4 = h('ul', [
//     h('li', {
//         key: 'A'
//     }, 'A'),
//     h('li', {
//         key: 'B'
//     }, 'B'),
//     h('li', {
//         key: 'C'
//     }, 'C'),
//     h('li', {
//         key: 'D'
//     }, 'D')
// ])

// const myVnode5 = h('ul', [
//     h('li', 'E'),
//     h('li', {
//         key: 'A'
//     }, 'A'),
//     h('li', {
//         key: 'B'
//     }, 'B'),
//     h('li', {
//         key: 'C'
//     }, 'C'),
//     h('li', {
//         key: 'D'
//     }, 'D')
// ])

// // 让虚拟节点上树


// index.js
import h from './h.js'
import patch from './patch.js'

const myVnode1 = h('h1', {}, '你好')
const myVnode2 = h('ul', {}, [
    h('li', {}, 'A'),
    h('li', {}, 'B'),
    h('li', {}, 'C'),
    h('li', {}, 'D'),
])
const myVnode3 = h('ul', {}, [
    h('li', {}, [
        h('span', {}, 'spanA'),
        h('span', {}, 'spanB'),
    ]),
    h('li', {}, [
        h('span', {}, 'spanA'),
        h('span', {}, [
            h('a', {}, 'a标签')
        ]),
    ])
])

const myVnode4 = h('section', {}, [
    h('p', {}, 'A'),
    h('p', {}, 'B'),
    h('p', {}, 'C'),
    h('p', {}, 'D'),
])

const myVnode5 = h('section', {}, 'hello')



const myVnode6 = h('section', {}, 'hello')
const myVnode7 = h('section', {}, [
    h('p', {}, 'A'),
    h('p', {}, 'B'),
    h('p', {}, 'C'),
    h('p', {}, 'D'),
])

const myVnode8 = h('ul', {}, [
    h('li', { key: 'A' }, 'A'),
    h('li', { key: 'B' }, 'B'),
    h('li', { key: 'C' }, 'C'),
    h('li', { key: 'D' }, 'D')
])
const myVnode9 = h('ul', {}, [
    h('li', { key: 'A' }, 'A'),
    h('li', { key: 'B' }, 'B'),
    h('li', { key: 'C' }, 'C'),
    h('li', { key: 'D' }, 'D')
])

const myVnode10 = h('ul', {}, [
    h('li', { key: 'A' }, 'A'),
    h('li', { key: 'B' }, 'B'),
    h('li', { key: 'C' }, 'C'),
    h('li', { key: 'D' }, 'D'),
    h('li', { key: 'F' }, 'F')
])

const myVnode11 = h('ul', {}, [
    h('li', { key: 'M' }, 'M'),
    h('li', { key: 'A' }, 'A'),
    h('li', { key: 'B' }, 'B'),
    h('li', { key: 'C' }, 'C'),
    h('li', { key: 'D' }, 'D'),
    h('li', { key: 'F' }, 'F')
])

const app = document.getElementById('app')
const btn = document.querySelector('button')

patch(app, myVnode10)



btn.onclick = function () {
    patch(myVnode10, myVnode11)
}